<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>组件基础</title>
  <script src="../js/vue.js"></script>
</head>

<body>
  <div id="app">
    {{msg}}
    <my-com1 @my-event="childHandler" :msg-attr="11" :flag="true"></my-com1>
  </div>
  <script>
    // 定义组件
    let component1 = {
      props: {
        obj: {
          // 对象数组这种引用数据类型的默认值，必须由一个工厂函数返回
          type: Object,
          default() {
            return {
              name: 'lisi'
            }
          }
        },
        title: {
          type: String,
          default: '你好'
        },
        msgAttr: {
          type: Number,
          required: true,
          validator(val) {
            return val > 10
          }
        },
        flag: {
          type: Boolean,
          required: true
        }
      },
      data() {
        return {
          comMsg: '我是子组件数据'
        }
      },
      template: `
        <div>
          <p>我是vue的组件</p>
          <h1>{{comMsg}}</h1>
          <button @click="clickHandler">修改数据</button>
          <span>父组件传递过来的数据：{{title}}---{{msgAttr}}</span>
          布尔：{{flag}}<br>
          对象：{{obj}}
          <button @click="emitHandler">发送数据</button>
        </div>
      `,
      methods: {
        clickHandler() {
          this.comMsg = '新的组件数据'
        },
        emitHandler() {
          // 两个参数，第一个参数是向上发送事件的名称
          // 第二个参数，是发送上去的子组件数据
          this.$emit('my-event', this.comMsg)
        }
      },
      created() {
        console.log(this.flag);
      }
    }
    // 组件注册
    // 全局注册
    // Vue.component('my-com2', component2)
    let vm = new Vue({
      el: '#app',
      data: {
        msg: 'hello vue component'
      },
      methods: {
        childHandler(val) {
          console.log(val);
        }
      },
      components: {
        'my-com1': component1
      }
    })
  </script>
</body>

</html>